<script setup lang="ts">

</script>

<template>
  <main class="all">
    <div class="main">
      <div class="image">
        <img src="/images/repassword.jpg" alt="login" />
      </div>
      <div class="form">
        <h3>重置密码</h3>
        <div class="inputs">
          <div class="account">
            <form-input  type="text" placeholder="请输入手机号" />
            <div class="error"><icon-info/>手机号不正确</div>
            <form-input class="input mt-4" type="password" placeholder="请输入密码" />
            <form-input class="input mt-4" type="password" placeholder="确认密码" />
          </div>
          <div class="code">
            <form-input placeholder="请输入验证码"/>
            <el-button type="success">发送验证码</el-button>
          </div>
          <form-button><icon-setting-three/>确认</form-button>
          <div class="footer">
            <a href="#"><icon-home />进入首页</a>
            <a href="#"><icon-user />注册用户</a>
            <a href="#"><icon-login />返回登录</a>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
main.all{
  @apply h-screen bg-slate-300 flex justify-center items-center;
  div.main{
    @apply bg-white w-[720px] grid grid-cols-2 rounded overflow-hidden shadow;
    div.image{
      @apply relative;
      img{
        @apply absolute w-[360px] h-full object-cover;
      }
    }
    div.form{
      @apply p-6;
      h3{
        @apply text-gray-700 font-bold text-center;
      }
      div.inputs{
        @apply flex flex-col mt-4;
        div.account{
          @apply p-4 border border-slate-400 rounded;
        }
        div.code{
          @apply flex gap-2 items-center mt-4;
        }
        div.error{
          @apply bg-red-300 p-1 text-white mt-1 text-xs flex items-center gap-1;

        }

        div.footer{
          @apply flex justify-center items-center gap-2 mt-6;
          a{
            @apply text-xs text-gray-600 flex gap-1 hover:text-pink-500 duration-300;
          }
        }
      }
    }
  }
}
</style>